<template>
    <div>
        <section class="collection" v-if="msgShow">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="3D模型" name="mode3D" :lazy="true">
                        <mode-list3d toUrl="modeInfo" modeType="1"></mode-list3d>
                    </el-tab-pane>
                    <el-tab-pane label="SU模型" name="modeSu" :lazy="true">
                        <mode-list3d toUrl="ModeInfoSu" modeType="2"></mode-list3d>
                    </el-tab-pane>
                    <el-tab-pane label="高清案例" name="definition" :lazy="true">
                        <mode-list3d toUrl="ModeInfoSu" modeType="7"></mode-list3d>
                    </el-tab-pane>
                    <el-tab-pane label="概念方案" name="modeConcept" :lazy="true">
                        <mode-list3d toUrl="modeInfoConcept" modeType="4"></mode-list3d>
                    </el-tab-pane>
                    <el-tab-pane label="施工图" name="modeConstr" :lazy="true">
                        <mode-list3d toUrl="modeInfoConstr" modeType="3"></mode-list3d>
                    </el-tab-pane>
                    <!-- <el-tab-pane label="预算模板" name="modeBudget" :lazy="true">
                        <mode-list-concept toUrl="modeInfoBudget" modeType="5"></mode-list-concept>
                    </el-tab-pane> -->
                    <!-- <el-tab-pane label="材质贴图" name="czMap">
                        <mode-list-constr :modeMsg="collMsg[6]" toUrl="modeInfoBudget" :userMsg="userMsg" modeType="articlecollects"></mode-list-constr>
                    </el-tab-pane> -->
                </el-tabs>
        </section>
    </div>
</template>
<script>

export default {
    
    name : "Collection",
    props:["sort"],
    data(){
        return {
            msg : "我是收藏",
            msgShow : true,
             activeName: 'mode3D'
        }
    },
    components : {
        page : resolve => require(["../../page"], resolve),//翻页组件
        modeList3d : resolve => require(["./collectionChild/modeList3D"], resolve),//3D，SU上传模块列表
        modeListConcept : resolve => require(["./collectionChild/modeListConcept"], resolve),//概念方案，预算模板上传模块列表
        modeListConstr : resolve => require(["./collectionChild/modeListConstr"], resolve)//施工图模块列表
    },
    methods : {
        // 展示详细
        detailedShow () {
            this.msgShow = false;
        },
        detaileHide(){
            this.msgShow = true;
        },
         open3() {
            this.$prompt('收藏夹名称', '编辑收藏夹', {
            cancelButtonText: '取消',
            confirmButtonText: '确定',
            // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
            // inputErrorMessage: '邮箱格式不正确'
            }).then(({ value }) => {
            /* this.$message({
                type: 'success',
                message: '你的收藏夹名称是: ' + value
            }); */
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '取消输入'
            });       
            });
        },
        handleClick(tab, event) {
            // console.log(tab, event);
        }
    }
}
</script>
<style scope>
.collection{
    background: #fff!important;
}



.collection .el-tabs__nav {
    float: none;
}
.collection .el-tabs__header{
    width: 100%;
    height: 62px!important;
    font-size: 15px;
    line-height: 42px;
    padding-top: 13px;
    text-align: center!important;
    margin: 0;
    border: none;
    border-bottom: 1px solid #dddddd;

}
.collection .el-tabs__nav .el-tabs__item.is-active{
    border: none!important;
    border-bottom: 2px solid #ea514b!important;
   
}
.collection .el-tabs__item{
    padding-right: 12px!important;
     padding: 0 12px;
     margin-right: 36px;
     padding-left: 12px!important;
}
.collection .el-tabs__nav{
    float: none;
}
.collection .el-tabs__content{
    padding-left: 11px;
    padding-top: 11px;
}
.collection .uploadPage{
    padding-top: 0;
}


.collection header{
     border-bottom: 1px solid #dddddd;
}
.record{
    float: left;
    font-size: 18px;
    line-height: 66px;
    color: #333333;
    font-weight: bold;
    padding-left: 40px;
    
}
.newlyBuild{
    float: right;
    margin-top: 13px;
    margin-right: 35px;
}
.newlyBuild button{
    width: 128px;
}
.collectionList{
    float: left;
    width: 263px;
    height: 296px;
    border: 1px solid #dddddd;
    margin-bottom: 27px;
    margin-right: 20px;
}
.collectionBox{
    padding: 27px 0 0 36px;
}
.collectionListBox li{
    float: left;
    margin: 13px 0 0 13px;
}
.collectionListBox img{
    display: block;
}
.collectionList p{
    font-size: 16px;
    line-height: 44px;
    color: #333333;
    text-align: center;
}
.coollectionPage{
    width: 100%;
    padding: 40px 0;
}
.coollectionPage .el-pager li{
    /* background: #f6f6f6; */
}
.coollectionPage .el-pagination .btn-next,.coollectionPage .el-pagination .btn-prev{
    background: #f6f6f6;
}
.editBox{
    float: right;
    margin-top: 25px;
}
.editBox button{
    font-size: 16px;
    line-height: 20px;
    background: transparent;
    padding: 0;
    border: none;
    outline: none;
    margin-right: 20px;
    cursor: pointer;
    color: #333333;
}
.el-button--text:focus, .el-button--text:hover{
    
    color: #333333;
}
.editBox button i{
    display: inline-block;
    width: 21px;
    height: 21px;
    vertical-align: middle;
    margin-right: 10px;
}
.edit{
    background: url(../../../img/edit.png) no-repeat;
}
.return{
    background: url(../../../img/return.png) no-repeat;
}

.detailedList{
    float: left;
    position: relative;
    width: 156px;
    height: 156px;
    margin: 0 0 24px 19px;
}
.detailedList img{
    display: block;
    width: 156px;
    height: 156px;
}
.detailedList span{
    position: absolute;
    top: 0;
    right: 0;
    width: 17px;
    height: 17px;
    color: #fff;
    font-size: 14px;
    line-height: 17px;
    text-align: center;
    border-radius: 0 0 0 10px;
}
.spanHover{
    background: rgba(0,0,0,.4);
}
.spanfocuse{
     background: rgba(0,0,0,.8);
}
.detailedBox{
    padding: 15px 0 0 18px; 
}

.el-message-box{
    width: 724px;
    height: 282px;
    border-radius: 0;
    padding: 0;
}
.el-message-box .el-message-box__header{
    
    color: #393939;
    border-bottom: 1px solid #dddddd;
}
.el-message-box .el-message-box__title{
    display: inline-block;
    font-size: 16px;
    line-height: 78px;
    color: #333333;
}
.el-message-box .el-message-box__header{
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 53px;
}
.el-message-box .el-message-box__close{
    font-size: 22px;
    margin-top: 8px;
}
.el-message-box .el-message-box__message{
    float: left;
    width: 150px;
    text-align: center;
    color: #464646;
}
.el-message-box .el-message-box__message p{
    font-size: 16px;
    line-height: 48px;

}
.el-message-box .el-message-box__content{
    padding: 0;
}
.el-message-box .el-message-box__input{
    float: left;
    padding-top: 0;
}
.el-message-box .el-input__inner{
    width: 464px;
    height: 48px;
    border-radius: 0;
}
.el-message-box .el-message-box__content{
    overflow: hidden;
}
.el-message-box .el-message-box__errormsg{
    display: none;
}
.el-message-box .el-message-box__btns{
    text-align: center;
    padding-top: 32px;
}
.el-message-box .el-button{
    width: 200px;
    height: 38px;

}
.el-message-box .el-button:focus,.el-message-box .el-button:hover{
    color: #686868;
    background: #dddddd;
    border-color: #dddddd;
}
.el-message-box .el-button:focus,.el-message-box .el-button:hover{
    color: #fff;
}
.el-message-box .el-button--primary{
    background: #e1a638;
    border-color: #e1a638;
}
.el-message-box .el-button--primary:focus,.el-message-box .el-button--primary:hover{
    background: #e1a638;
    border-color: #e1a638;
}
</style>
